<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>登录页面</title>
  <style>
    #div{
      width: 400px;
      height: 250px;
      border-radius: 30px;
      background:#ccc;
      position: fixed;
      top: 20px;
      left: 30%;
    }
    #close{
      position: absolute;
      top: 10px;
      right: 10px;
	  cursor:pointer;
    }
  </style>
</head>
<body>
  <button id="btn">登录</button>
  <div id="div"  style="display:none">
    <span id="close">X</span>
  </div>
  <script>
    //获取登录按钮
    var oButton=document.getElementById("btn");
    //获取隐藏了的div	
	var oDiv=document.getElementById("div");
	//获取关闭按钮
	var oClose=document.getElementById('close');

	 //点击登录按钮，若div是隐藏的就显示，否则就隐藏
	 oButton.onclick=function(){
	   if(oDiv.style.display=="none"){
	      oDiv.style.display="block";
	   }else{
	      oDiv.style.display="none";
	   }
	 }
	 //如果div显示，点击关闭按钮就隐藏
	 oClose.onclick=function(){
	   if(oDiv.style.display=="block"){
	      oDiv.style.display="none";
	   }
	 }
	 
	 
  </script>
</body>
</html>